<script setup lang="ts">
import * as echarts from 'echarts/core';
import { GridComponent, type GridComponentOption } from 'echarts/components';
import { BarChart, type BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { TooltipComponent, type TooltipComponentOption, LegendComponent, type LegendComponentOption } from 'echarts/components';
import {
    TitleComponent, type TitleComponentOption,
    ToolboxComponent, type ToolboxComponentOption,
    VisualMapComponent, type VisualMapComponentOption,
    MarkAreaComponent, type MarkAreaComponentOption
} from 'echarts/components';

import { onMounted } from 'vue';

echarts.use([GridComponent, BarChart, CanvasRenderer]);
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
echarts.use([TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]);
echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    VisualMapComponent,
    MarkAreaComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
    | GridComponentOption
    | BarSeriesOption
    | LineSeriesOption
    | TooltipComponentOption
    | LegendComponentOption
    | TitleComponentOption
    | ToolboxComponentOption
    | TooltipComponentOption
    | VisualMapComponentOption
    | MarkAreaComponentOption

>;

/**
 * 绘制过去12月每月用电量的图表
 */
function drawYearlyChart() {
    var chartDom = document.getElementById('yearlyChart')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        xAxis: {
            type: 'category',
            data: [
                '23-2',
                '23-3',
                '23-4',
                '23-5',
                '23-6',
                '23-7',
                '23-8',
                '23-9',
                '23-10',
                '23-11',
                '23-12',
                '24-1'
            ]
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '50'
        },
        color: '#4bbfb2',

        series: [
            {
                data: [
                    110,
                    159,
                    154,
                    144,
                    120,
                    {
                        value: 200,
                        itemStyle: {
                            color: '#F56C6C'
                        }
                    },
                    180,
                    150,
                    80,
                    70,
                    110,
                    130
                ],
                type: 'bar',
                barWidth: '50%', // 设置柱宽为系列宽度的50%
                label: {
                    show: true, // 显示标签
                }
            }
        ]
    };

    option && myChart.setOption(option);
}

/**
 * 绘制过去一周每天的用电量
 */
function drawWeeklyChart() {
    var chartDom = document.getElementById('weeklyChart')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '50'
        },
        series: [
            {
                data: [5, 3.5, 4, 2.8, 6, 4.2, 4.9],
                type: 'line',
                label: {
                    show: true, // 显示标签
                    color: '#fff'
                }
            }
        ]
    };

    option && myChart.setOption(option);
}

/**
 * 绘制过去24小时累计用电量
 */
function drawDailyChart() {
    var chartDom = document.getElementById('dailyChart')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        // title: {
        //     text: 'Distribution of Electricity',
        //     subtext: 'Fake Data'
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // prettier-ignore
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} W'
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [
                {
                    lte: 11,
                    color: 'green'
                },
                {
                    gt: 11,
                    lte: 14,
                    color: 'red'
                },
                {
                    gt: 14,
                    lte: 19,
                    color: 'green'
                },
                {
                    gt: 19,
                    lte: 22,
                    color: 'red'
                },
                {
                    gt: 22,
                    color: 'green'
                }
            ]
        },
        series: [
            {
                name: 'Electricity',
                type: 'line',
                smooth: true,
                // prettier-ignore
                data: [300, 280, 250, 260, 270, 300, 320, 300, 310, 500, 550, 690, 670, 720, 700, 420, 370, 400, 398, 700, 800, 750, 721, 450],
                // label: {
                //     show: true, // 显示标签
                //     color: '#fff'
                // },
                markArea: {
                    itemStyle: {
                        color: 'rgba(255, 173, 177, 0.4)'
                    },
                    label: {
                        color: '#fff'
                    },
                    data: [
                        [
                            {
                                name: '用电午高峰',
                                xAxis: '11:00'
                            },
                            {
                                xAxis: '14:00'
                            }
                        ],
                        [
                            {
                                name: '用电晚高峰',
                                xAxis: '19:00'
                            },
                            {
                                xAxis: '22:00'
                            }
                        ]
                    ]
                }
            }
        ]
    };

    option && myChart.setOption(option);

}



onMounted(() => {
    drawYearlyChart()
    drawWeeklyChart()
    drawDailyChart()
})
</script>

<template>
    <div class="daily">
        <div class="dailyLable">
            过去24小时每小时用电量
        </div>
        <div id="dailyChart"></div>
    </div>
    <div class="yearly">
        <div class="yearlyLable">
            过去12月每月用电量
        </div>
        <div id="yearlyChart"></div>
    </div>
    <div class="weekly">
        <div class="weeklyLable">过去7天每日用电量</div>
        <div id="weeklyChart"></div>
    </div>
</template>

<style scoped>
.daily {
    width: 96%;
    height: 450px;
    margin: 0 auto;
    border: 1px solid #596074;
}

.yearlyLable,
.weeklyLable,
.dailyLable {
    height: 30px;
    margin-left: 50px;
    font-style: 14px;
    line-height: 60px;
    letter-spacing: 2px;
}

#dailyChart {
    width: 100%;
    height: 420px;
}

.yearly {
    float: left;
    width: 54%;
    height: 350px;
    margin-top: 20px;
    margin-left: 30px;
    border: 1px solid #596074;
}

.weeklyLable,
.yearlyLable {
    margin-left: 30px;
}

#weeklyChart,
#yearlyChart {
    width: 100%;
    height: 320px;
}

.weekly {
    float: left;
    width: 40%;
    height: 350px;
    margin-top: 20px;
    margin-left: 27px;
    border: 1px solid #596074;
}
</style>